<template>
    <div>
        <p>纯vue版本的</p>
        <countA></countA>
        <hr>
        <p>vueX版本的</p>
        <countB></countB>
        <hr>
        <p>getter的用法</p>
        <countC></countC>
        <hr>
        <p>方式一：程序员亲自去写计算属性</p>
        <countD></countD>
        <hr>
        <p>方式二：接收mapState生成计算属性，从state中读取数据</p>
        <countE></countE>
        <hr>
        <p>mapMutations的用法</p>
        <countF></countF>
        <hr>
        <p>模块化 --- (使用mapState和mapActions的方式)</p>
        <countG></countG>
        <hr>
        <p>模块化 --- (使用基本方式的方式)</p>
        <countH></countH>
    </div>
</template>
<script>
import countA from './components/count1.vue'
import countB from './components/count2.vue'
import countC from './components/count3.vue'
import countD from './components/count4.vue'
import countE from './components/count5.vue'
import countF from './components/count6.vue'
import countG from './components/count7.vue'
import countH from './components/count8.vue'
export default {
    components:{
        countA,
        countB,
        countC,
        countD,
        countE,
        countF,
        countG,
        countH
    },
    data() {
        return {
            
        }
    }
}
</script>
<style scoped>
 
</style>